<template>
	<view class="my-bg">
		<view class="pad-left-right-24">
			<view class="bg-white radius20 pad-40">
				<view class="font-36 font-w-500">重置密码</view>
				<!-- <view class="mar-top-40">请用{{userInfo?.tel?.replace(/^(\d{3})\d{4}(\d{4})$/, '\$1****\$2')}}接收验证</view> -->
				<view class="form-box font-34">
					<up-form class="mar-top-30" labelWidth="200" labelPosition="top" :model="formData" :rules="rules"
						ref="ruleFrom">
						<!-- 账号 -->
						<up-form-item prop="login_secret" class="mar-top-40">
							<up-input v-if="showErPassword" type="text" clearable placeholderClass="input-style"
								placeholder="请输入新密码" v-model="formData.login_secret">
								<template #suffix>
									<up-icon color="#888888" size="20" class="icon" @click="changeErPassword"
										:name="showErPassword ? 'eye-fill' : 'eye-off'" />
								</template>
							</up-input>
							<up-input v-else type="password" clearable placeholderClass="input-style"
								placeholder="请输入新密码" v-model="formData.login_secret">
								<template #suffix>
									<up-icon color="#888888" size="20" class="icon" @click="changeErPassword"
										:name="showErPassword ? 'eye-fill' : 'eye-off'" />
								</template>
							</up-input>
						</up-form-item>
						<!-- 二次账号 -->
						<up-form-item prop="login_secret_confirmation">
							<up-input v-if="showPassword" type="text" clearable placeholderClass="input-style"
								placeholder="请再次输入新密码" v-model="formData.login_secret_confirmation">
								<template #suffix>
									<up-icon color="#888888" size="20" class="icon" @click="changePassword"
										:name="showPassword ? 'eye-fill' : 'eye-off'" />
								</template>
							</up-input>
							<up-input v-else type="password" clearable placeholderClass="input-style"
								placeholder="请再次输入新密码" v-model="formData.login_secret_confirmation">
								<template #suffix>
									<up-icon color="#888888" size="20" class="icon" @click="changePassword"
										:name="showPassword ? 'eye-fill' : 'eye-off'" />
								</template>
							</up-input>
						</up-form-item>
					</up-form>
				</view>
				<view @click="submit" class="button-style">确认修改</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { baseInfo, updateLoginSecret } from '@/api/user.js';

	const ruleFrom = ref(null)
	const userInfo = ref({});
	const formData = reactive({
		login_secret: '',
		login_secret_confirmation: '',
	})
	// 查看密码
	let showPassword = ref(false);
	let showErPassword = ref(false);

	const changePassword = () => {
		showPassword.value = !showPassword.value;
	}

	const changeErPassword = () => {
		showErPassword.value = !showErPassword.value;
	}

	// 表单校验规则
	const rules = ref({
		login_secret: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			},
			{
				min: 6,
				message: '密码最少6位',
				trigger: 'blur'
			}
		],
		login_secret_confirmation: [{
				required: true,
				message: '请再次输入新密码',
				trigger: 'blur'
			},
			{
				validator: (rule, value, callback) => {
					return value === formData.login_secret
				},
				message: '两次输入密码不一致',
				trigger: ['blur']
			}
		]
	})

	// 修改密码
	const submit = async () => {
		ruleFrom.value.validate().then(async valid => {
			if (valid) {
				const res = await updateLoginSecret(formData);
				if (res.code === 200) {
					uni.$u.toast('修改成功');

					uni.removeStorageSync('jwt_token');
					uni.removeStorageSync('refresh_token');
					uni.removeStorageSync('userId');
					uni.removeStorageSync('loginStatus');

					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/ChooseRole/ChooseRole'
						})
					}, 1500)
				}
			}
		}).catch(error => {
			console.log('失败:', error);
		})
	}

	// 获取当前登录的账户信息
	onShow(() => {
		baseInfo().then(res => {
			if (res.code == 200) {
				userInfo.value = res.data.user;
			}
		})
	})
</script>

<style scoped lang="scss">
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		min-height: 100vh;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.button-style {
		padding: 21rpx 0;
		text-align: center;
		margin-top: 82rpx;
	}

	.button-code {
		padding: 7rpx 10rpx;
		background: $uni-color-primary;
		color: white;
		border-radius: 4rpx;
	}
</style>